<template>
  <el-dialog :title="dialogTitle" width="690px" :close-on-click-modal="false" :visible.sync="visible" @closed="onClose">
    <template v-if="visible">
      <super-form v-bind="{...superFormConfig}" />
    </template>
  </el-dialog>
</template>

<script>
import SuperForm from '@/components/SuperForm'
import { clearExecuteTypeMap, partTypeMap, clearWorkTypeMap } from '@/config/dict'
import { fetchAttendanceAdd, fetchAttendanceUpdate, fetchAttendanceGet } from '@/api/sanitation/attendanceShift'
import { fetchDropPartAllList } from '@/api/common/commonDropDown'
export default {
  components: {
    SuperForm
  },
  props: {
    taskType: {
      type: Number,
      default: 0
    },
    formatFormRender: {
      type: Function,
      default: _form => Promise.resolve(_form)
    },
    checkFormData: {
      type: Function,
      default: _formData => true
    },
    onSubmit: {
      type: Function,
      default: () => {}
    }
  },
  data: function() {
    return {
      componentList: [],
      superFormConfig: {

      },
      visible: false
    }
  },
  computed: {
    dialogTitle: function() {
      return clearWorkTypeMap.find(e => e.key === this.$props.taskType).value
    }
  },
  methods: {
    open(id) {
      this.$data.id = id
      this.postPartList().then(() => {
        if (id) {
          this.postGet(id).then(() => {
            this.setSuperForm()
            this.$data.visible = true
          })
        } else {
          this.setSuperForm()
          this.$data.visible = true
        }
      })
    },
    setSuperForm() {
      const cascaderConfig = {
        lazy: true,
        multiple: true,
        lazyLoad: (node, resolve) => {
          const { level, value } = node
          if (level === 0) {
            const nodes = partTypeMap.filter(e => e.key !== 0 && e.key !== 4).map(e => ({ label: e.value, value: e.key, leaf: level >= 1 }))
            resolve(nodes)
          } else {
            this.postPartList(value).then(res => {
              resolve(res)
            })
          }
        }
      }

      const superFormConfig = {

        labelWidth: '120px',
        size: 'small',
        renderFormItem: [
          { type: 'input', label: '任务名称', required: true, key: 'name', col: 24, slotAttrs: { style: { width: '91.5%' }}},
          { type: 'select', label: '排班类型', required: true, key: 'executeType', slotAttrs: { style: { width: '91.5%' }, options: clearExecuteTypeMap }, col: 24 },
          { type: 'dateTime', label: '排班日期', required: true, slotAttrs: { type: 'daterange', style: { width: '91.5%' }}, key: 'time', subKey: ['beginDate', 'endDate'], col: 24 },

          { type: 'cascader', label: '作业部件', required: true, key: 'componentId', slotAttrs: { props: cascaderConfig, style: { width: '91.5%' }}, col: 24 },
          { type: 'input', label: '开放时间', required: true, key: 'openDate', col: 24, slotAttrs: { style: { width: '91.5%' }}},
          { type: 'input', label: '路线描述', required: true, key: 'routeDesc', col: 24, slotAttrs: { style: { width: '91.5%' }}},
          { type: 'input', label: '任务内容', required: true, key: 'content', col: 24, slotAttrs: { rows: '2', type: 'textarea', style: { width: '91.5%' }}}
        ],
        formButtons: {
          isDialog: true,
          submitName: '提交',
          resetName: '取消',
          submitCallback: (data) => {
            if (!this.$props.checkFormData(data)) {
              return false
            }
            this.postSubmit(data)
          },
          resetCallback: () => {
            this.$data.visible = false
          }
        }
      }
      if (this.$data.formData) {
        superFormConfig.formData = this.$data.formData
      }
      this.$props.formatFormRender(superFormConfig.renderFormItem).then((_renderFormItem) => {
        superFormConfig.renderFormItem = _renderFormItem
        this.$data.superFormConfig = superFormConfig
      })
    },
    onClose() {
      this.$data.formData = {}
    },
    postGet(id) {
      return fetchAttendanceGet({ id }).then(res => {
        res.componentId = res.attendanceComponentList.map(e => e.componentId)
        this.$data.formData = res
      })
    },
    postPartList(type = 0) {
      return fetchDropPartAllList({ type }).then(res => {
        return res.map(e => ({ label: e.name, value: e.id, leaf: true }))
      })
    },

    postSubmit(formData) {
      const post = this.$data.id ? fetchAttendanceUpdate : fetchAttendanceAdd
      formData.type = this.$props.taskType // 1=中转站排班 2=公厕排班3=垃圾分类排班 4=巡查排班 5=清扫保洁排班
      if (this.$props.taskType === 4) {
        formData.executeType = 1 // 巡查排班 默认为周期排班
      } else {
        formData.componentId = formData.componentId.map(e => e[1])
      }

      post(formData).then(() => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.$props.onSubmit()
        this.$data.visible = false
      })
    }
  }
}
</script>

<style>

</style>
